<template>
  <div class="center-box">
    <div class="flex">
      <div>
        <el-form :inline="true" :model="where" label-position="top">
          <el-form-item>
            <el-input v-model="where.number" :placeholder="plugin.lang('ticket.number')" style="width:200px" clearable />
          </el-form-item>
          <el-form-item>
            <div style="width: 300px"><Daterange @date="date => where.time = date" /></div>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="ticketModel.page(1)" plain>
              <template #icon>
                <i class="iconfont min icon-search-max"></i>
              </template>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <Table @print="onPrint" />
    <div class="page">
      <el-pagination
        @current-change="ticketModel.page"
        :current-page="where.page"
        :page-size="where.page_size"
        layout="total, prev, pager, next, jumper"
        :total="where.page_total"
        background>
      </el-pagination>
    </div>
  </div>
</template>
<script>
import app from '@/app'
import ticketModel from '../model/ticket'
import Table from './ticket/table'
import Print from '../common/print'

import Daterange from '@/components/daterange'

export default {
  components: {
    Daterange,
    Table
  },
  setup() {
    // 条件 
    const where = ticketModel.data

    // 打印
    const onPrint = (data) => {
      Print.load(data)
    }

    return {
      lang: app.lang,
      plugin: app.plugin.index,
      where,
      ticketModel,
      onPrint
    }
  }
}
</script>